<template lang="">
	<div class="order-wrap">
		<div class="page">
			<mine-header>{{ title }}</mine-header>
			<div class="ipt">
				<input
					type="password"
					placeholder="搜索"
					class="iconfont icon-faxian:before"
				/>
			</div>

			<div class="detail">
				<li
					class="selete"
					:class="{ active: item.id == currentClass }"
					v-for="item in seletedata"
					:key="item.id"
					:type="item.orderstate"
					@click="changeAction(item.id, item.name)"
				>
					{{ item.name }}
				</li>
			</div>


			      <div class="collect">

        <div class="content" v-if="list">

          <div class="li" v-for="(item,index) in list" :key="index" @click="toAction(item._id)">
              <div class="img">
                <img
                  :src="item.hotelId.picUrl"
                  alt="">
              </div>
              <div class="title">
                <h3>{{item.hotelId.title}}</h3>
              <p>{{item.hotelId.roomNum }}居{{ item.hotelId.bedNum }}床{{item.hotelId.bathNum}}人</p>
              <span class="span">￥{{item.totalPrice
                }}</span>
                <div class="xs" v-if="item.orederstate==1">已确认</div>
				<div class="xs" v-if="item.orederstate==2">待支付</div>
				<div class="xs" v-if="item.orederstate==3">退款中</div>
              </div>
            </div>




        </div>
      </div>
			<!-- <orderlist :selete="selete" /> -->
		</div>
		<router-view></router-view>
	</div>
</template>
<script>
import MineHeader from '../mine-header.vue';
import Orderlist from '../order/orderlist.vue';
import { myOrderApi } from '@/api/mine';
export default {
	name: 'orderItem',
	components: {
		[MineHeader.name]: MineHeader,
		[Orderlist.name]: Orderlist,
	},
	data() {
		return {
			//默认选中
			currentClass: 1,
			seletedata: [
				{
					id: 1,
					name: '已确认',
					orderstate: 'affirm',
				},
				{
					id: 2,
					name: '待支付',
					orderstate: 'unpaid',
				},
				{
					id: 3,
					name: '退款中',
					orderstate: 'refund',
				},
				{
					id: 4,
					name: '全部订单',
					orderstate: '',
				},
			],
			title: '我的订单',
			selete: [],
			list:[],
		};
	},
	methods: {
		changeAction(id, name) {
			this.currentClass = id;
			//请求不同数据的传入子组件进行渲染
		},

		toAction(id) {
			this.$router.push(`/mine/myorder/orderlist/${id}`);
		},

		//请求所有订单数据
		async orderData() {
			let res = await myOrderApi({orederstate:this.currentClass});

			// console.log(res);
			const orderinfo = res.data.orderlist;
			// console.log(this.$route);
			// console.log(orderinfo);
			this.list = orderinfo,
			console.log(this.list);

			 
			orderinfo.map((i) => {
				if (i.orederstate === this.$route.params.orderstate) {
					this.selete.push(i);
				}
				return this.selete;
			});
			
			// console.log(this.$route.params.orderstate);
		},
	},
	created() {
		//默认选中
		this.currentClass = this.$route.params.id || 1;
		this.orderData();
	},
	watch:{
		currentClass(){
			this.orderData();
		}
	}
};
</script>
<style lang="scss" scoped>
@function vw($px) {
	@return ($px/375) * 100vw;
}


.collect {
  height: 100%;
  background-color: #f4f6f9;

  .content {
    width: 85%;
    margin-left: 10%;
    margin-top: vw(40);

    .li {
      background-color: #fff;
      display: flex;
      margin-bottom: vw(20);

      .span {
        color: #ff9933;
        font-size: vw(18);
      }
      .img{
        height: vw(108);
        img{
          height: 100%;
          width: vw(110);
        }
      }

      .title {
        flex: 1;
        padding-left: vw(15);
        padding-top: vw(15);
        box-sizing: border-box;
        position: relative;

        h3 {
          font-size: vw(16);
          margin-bottom: vw(16);
        }

        p {
          margin-bottom: vw(20);
        }

        .xs {
          position: absolute;
          right: vw(10);
          top: vw(0);
        //   width: vw(100);
        //   height: vw(34);
        //   border-radius: vw(20);
          text-align: center;
          line-height: vw(34);
          box-shadow: vw(20);
        //   border: 1px solid #ccc
        }
      }
    }
  }
}

.page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: #f4f6f9;
	.ipt {
		height: 30px;
		padding: 15px 0px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #f4f6f9;
		input {
			width: 90%;
			height: 100%;
			font-size: 16px;
		}
	}
	.detail {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		.selete {
			height: 100%;
			flex: 1;
			font-size: 14px;
			line-height: 50px;
			color: #b3b4c7;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			box-sizing: border-box;
			text-align: center;
		}
		.active {
			border-bottom: 5px solid #4a73ff;
		}
	}
}
</style>
